<!--
 * @Author: your name
 * @Date: 2021-04-20 11:06:50
 * @LastEditTime: 2021-07-21 14:24:29
 * @LastEditors: Please set LastEditors
 * @Description: 工单详情页面页头组件
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\detailPageHeader.vue
-->
<template>
  <page-layout :title="title" :avatar="avatar" :isBreadcrumb="isBreadcrumb" class="order-detail-head">
    <div class="head" slot="headerContent">
      <div class="title">工单号：{{ orderId }}
        <a-icon type="star" @click="onCollect" :style="collect || leftType == 'own_collect' ? 'color: rgba(28, 106, 235, 1)' : 'color: rgba(0, 0, 0, .45)'+';margin-left:8px'" />
      </div>
      <a-space :size="8">
        <span>{{ type }}</span>
        <a-tag :color="statusName == '待处理' ? 'orange' : 'green'">{{ statusName }}</a-tag>
      </a-space>
      <slot name="descriptions"></slot>
    </div>
    <template slot="extra">
      <slot name="button"></slot>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
export default {
  name: 'detailPageHeader',
  components: { PageLayout },
  props: ['title', 'avatar', 'orderId', 'type', 'statusName', 'collect', 'leftType'],
  data () {
    return {
      count: 0,
      isBreadcrumb: [],
    };
  },
  methods: {
    onCollect () {
      this.count++;
      this.count > 1 ? (this.count = 0) : (this.count = 1);
      if (this.count == 1) {
        this.$emit('collect-order', true);
      } else {
        this.$emit('collect-order', false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head .ant-space .ant-space-item {
  color: #000 !important;
}
/deep/ .page-header.head .content {
  width: 50% !important;
}
.order-detail-head {
  /deep/.page-header {
    margin-top: -60px !important;
  }
}
</style>
